<template>
	<view>
		<popup ref="refundPopInnerRef" :isStopMaskHide="false">
			<view class="yajin-panel flex-col">
				<view class="title">
					退款操作
				</view>
				<view class="align-center inpt-wrap">
					<view class="unit">
						￥
					</view>
					<input type="digit" placeholder="请输入退款金额" class="inpt" v-model="money">
				</view>
				<textarea  maxlength="300"  placeholder="请输入备注信息" class="txtarea" v-model="remark" />
				<view class="yajin-btn-wrap align-center justify-center">
					<view class="btn" @click="hidePop">
						取消
					</view>
					<view class="btn full" @click="confirm">确定</view>
				</view>
			</view>
		</popup>
	</view>

</template>

<script lang="ts">
import {
	defineComponent,
	// watchEffect,
	reactive,
	toRefs,
	// computed,
	// watch,
	// nextTick,
	ref,
} from 'vue';
export default defineComponent({
	setup(props: any, ctx: any) {
		const data: any = reactive({
			money:'',
			remark:'',
		});
		const refundPopInnerRef = ref();
		
		
		const showPop = ()=>{
			data.money='';
			data.remark='';
			refundPopInnerRef.value.show()
		}
		const hidePop = ()=>{
		   refundPopInnerRef.value.hide();
		}
		const confirm = ()=>{
		   if(!data.money){
			   uni.$tools.msg('请输入退款金额')
			   return;
		   }
		   hidePop();
		   const sendData = {
			   money: data.money,
			   remark: data.remark,
		   }
		   ctx.emit('confirm',sendData)
		}
		return {
			...toRefs(data),
			refundPopInnerRef,
			showPop,
			hidePop,
			
			confirm,
		};
		
	}
})
</script>

<style lang="scss" scoped>
.yajin-panel{
	width: 590rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 0 34rpx;
	.title{
		height: 114rpx;
		line-height: 114rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.select-wrap{
		width: 100%;
		height: 74rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		padding: 0 20rpx;
		.v{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.ic{
			width: 24rpx;
			height: 24rpx;
		}
	}
	.inpt-wrap{
		margin-top: 24rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		width: 100%;
		padding: 0 20rpx;
		.unit{
			height: 74rpx;
			line-height: 74rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.inpt{
			width: 100%;
			height: 74rpx;
			line-height: 74rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		
	}
	.upload-wrap{
		margin-top: 24rpx;
		.k{
			font-size: 28rpx;
			color:#333;
		}
	}
	.txtarea{
		margin-top: 20rpx;
		width: 100%;
		height: 121rpx;
		background: #F4F4F4;
		border-radius: 10rpx;
		padding: 20rpx;
		line-height: 32rpx;
		color: #333;
		font-size: 28rpx;
	}
	.yajin-btn-wrap{
		height: 130rpx;
		.btn{
			width: 160rpx;
			height: 60rpx;
			border-radius: 30px;
			line-height: 60rpx;
			text-align: center;
			background: #E0E0E0;
			color:#fff;
			margin-right: 72rpx;
			&.full{
				background: #256AE5;
				margin-right: 0;
			}
		}
	}
	
}
</style>
